// canvas 基础


/**
 * 绘制直线
 * row{
 *  fromX:起点的横坐标
 *  fromY:起点的纵坐标
 *  toX:始点横坐标
 *  toY:始点纵坐标
 *  width:线段宽度
 *  color:线段颜色
 * }
 */
const drawLine = (ctx,row)=>{
    row.width = typeof row.width != 'undefined'?row.width:1;
    row.color = typeof row.color != 'undefined'?row.color:'#080808';
    ctx.beginPath();
    ctx.moveTo(row.fromX, row.fromY);
    ctx.lineTo(row.toX, row.toY);
    ctx.strokeStyle = row.color;
    ctx.lineWidth = row.width;
    ctx.stroke();
};

/**
 * 绘制矩形
 * row{
 *  dx:矩形的起点横坐标
 *  dy:矩形的起点纵坐标
 *  width:矩形的宽度
 *  height:矩形的高度
 *  color:矩形填充颜色
 * }
 */
const drawRectangle =(ctx,row)=>{
    ctx.beginPath();
    row.color = typeof row.color != 'undefined'?row.color:'#FFFFFF'
    ctx.fillStyle = row.color;
    ctx.fillRect(row.dx, row.dy, row.width, row.height);
};



/**
 * 绘制箭头
 * row{
 *  fromX:起点的横坐标
 *  fromY:起点的纵坐标
 *  toX:始点横坐标
 *  toY:始点纵坐标
 *  theta:三角斜边一直线夹角
 *  headlen:三角斜边长度
 *  width:箭头线宽度
 *  color:箭头线颜色
 * }
 */
const drawArrow =(ctx,row)=>{
    row.theta = typeof( row.theta) != 'undefined' ?  row.theta : 30;
    row.headlen = typeof( row.headlen) != 'undefined' ?  row.headlen : 10;
    row.width = typeof( row.width) != 'undefined' ?  row.width : 1;
    row.color = typeof( row.color) != 'undefined' ?  row.color : '#000';

    // 计算各角度和对应的P2,P3坐标
    let angle = Math.atan2( row.fromY -  row.toY,  row.fromX -  row.toX) * 180 / Math.PI;
    let angle1 = (angle + row.theta) * Math.PI / 180;
    let angle2 = (angle - row.theta) * Math.PI / 180;
    let topX =  row.headlen * Math.cos(angle1);
    let topY =  row.headlen * Math.sin(angle1);
    let botX =  row.headlen * Math.cos(angle2);
    let botY =  row.headlen * Math.sin(angle2);

    ctx.save();
    ctx.beginPath();

    let arrowX = row.fromX - row.topX,
        arrowY = row.fromY - row.topY;

    ctx.moveTo(arrowX, arrowY);
    ctx.moveTo(row.fromX, row.fromY);
    ctx.lineTo(row.toX, row.toY);
    arrowX = row.toX + topX;
    arrowY = row.toY + topY;
    ctx.moveTo(arrowX, arrowY);
    ctx.lineTo(row.toX, row.toY);
    arrowX = row.toX + botX;
    arrowY = row.toY + botY;
    ctx.lineTo(arrowX, arrowY);
    ctx.strokeStyle = row.color;
    ctx.lineWidth = row.width;
    ctx.stroke();
    ctx.restore();
};

/**
 * 绘制文本
 */
const drawTxt =(ctx,row)=>{
    if(row.font){
        ctx.font = row.font;
    }
    ctx.fillText(row.txt, row.dx, row.dy, row.maxWidth);
};

/**
 * 绘制圆形
 * row{
 *  dx:圆弧对应的圆心横坐标
 *  dy:圆弧对应的圆心纵坐标
 *  radius:圆弧的半径大小
 *  color:线条样式
 * }
 * ctx.arc(x, y, radius, startAngle, endAngle [, anticlockwise]);
 * x:圆弧对应的圆心横坐标
 * y:圆弧对应的圆心纵坐标
 * radius:圆弧的半径大小
 * startAngle:圆弧开始的角度，单位是弧度
 * endAngle:圆弧结束的角度，单位是弧度
 *
 */
const drawCircle =(ctx,row)=>{
    row.color = typeof row.color != 'undefined'?row.color:'#080808';
    ctx.beginPath();
    ctx.arc(row.dx, row.dy, row.radius, 0, Math.PI * 2);
    ctx.strokeStyle = row.color;
    ctx.stroke();
};

/**
 * 绘制图片
 * row{
 *  img:需要放置的图片
 *  dx:放置位置的左上角横坐标
 *  dy:放置位置的左上角纵坐标
 *  dWidth:放置区域的宽度
 *  dHeight:放置区域的高度
 * }
 *
 *
 */
const drawImg =(ctx,row) =>{
    const image = new Image();
    image.src = row.img.src; // 替换为你的图片路径
    // 获取图片高宽
    const imgWidth = row.img.width;
    const imgHeight = row.img.height;
    image.onload = () => {
        ctx.beginPath();
        ctx.drawImage(image, row.dx, row.dy, row.dWidth, row.dHeight);
    };

};





export default {
    drawCircle,
    drawImg,
    drawArrow,
    drawTxt,
    drawLine,
    drawRectangle
}

